<template>
	<el-row type="flex" justify="center">
		<el-col>
			<el-input v-model="input" placeholder="请输入查询关键字" clearable @input="searchChange" @clear="clearSearch"></el-input>
		</el-col>
	</el-row>
	<el-table :data="love" border style="width: 100%;" height="70vh" v-loading="loading">
		<el-table-column prop="星球" label="星球" column-key="星球" :filters="filters" :filter-method="filterHandler" :resizable="false"
		 align="center" fixed />
		<el-table-column prop="人物" label="人物" column-key="人物" :resizable="false" align="center" min-width="180px">
			<template #default="scope">
				<div class="newtag">
					<el-tag size="medium" v-for="(v,k) in scope.row.人物.split('|')" :key="k">{{v}}</el-tag>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="名称" label="名称" column-key="名称" :resizable="false" align="center" />
		<el-table-column prop="技能" label="技能" column-key="技能" :resizable="false" />
		<el-table-column label="标签" align="center">
			<el-table-column prop="挑战" label="挑战" column-key="挑战" :filters="[{text:'挑战',value:'挑战'}]" :filter-method="filterHandler"
			 :resizable="false" />
			<el-table-column prop="探索" label="探索" column-key="探索" :filters="[{text:'探索',value:'探索'}]" :filter-method="filterHandler"
			 :resizable="false" />
			<el-table-column prop="打工" label="打工" column-key="打工" :filters="[{text:'打工',value:'打工'}]" :filter-method="filterHandler"
			 :resizable="false" />
		</el-table-column>
	</el-table>
</template>

<script>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue'

	export default {
		components: {},
		setup() {
			const datas = reactive({
				"love": null,
				"love_bak": null,
				"input": null,
				"loading": true,
				"filters": [{
					text: "冒险星",
					value: "冒险星"
				}, {
					text: "美食星",
					value: "美食星"
				}, {
					text: "博物馆星",
					value: "博物馆星"
				}, {
					text: "悬疑星",
					value: "悬疑星"
				}, {
					text: "星际流民",
					value: "星际流民"
				}],
				cols: [{
					"prop": "名称"
				}, {
					"prop": "技能"
				}]
			});
			const {
				proxy
			} = getCurrentInstance();
			proxy.$axios.get("./love.json").then(res => {
				datas.love = res.data;
				datas.love_bak = res.data;
				datas.loading = false;
			});
			const searchChange = () => {
				if (datas.input == "") {
					return clearSearch();
				};
				datas.loading = true;
				datas.love = datas.love.filter((i) => {
					let key = Object.values(i).toString().indexOf(datas.input);
					if (key >= 0) {
						return i;
					}
				})
				datas.loading = false;
			};
			const clearSearch = () => {
				datas.loading = true;
				datas.love = datas.love_bak;
				datas.loading = false;
			};
			const filterHandler = (val, row, column) => {
				return row[column.columnKey] === val;
			};
			return {
				searchChange,
				clearSearch,
				filterHandler,
				...toRefs(datas)
			}
		}
	}
</script>

<style>
</style>
